@url changeOpAddIconUrl changeOpAddIcon;
@url changeOpRemoveIconUrl changeOpRemoveIcon;

.line {
    border-bottom: 1px solid literal("var(--separator--color)");
    display: flex;
    flex-direction: row;
    align-items: center;
}

.add {
    background-color: literal("var(--create--background-color)");
    padding: 4px;
}

.addBullet {
    mask-image: changeOpAddIconUrl;
    -webkit-mask-image: changeOpAddIconUrl;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-color: literal("var(--create--color)");
    flex-grow: 0;
    flex-shrink: 0;
}

.remove {
    background-color: literal("var(--delete--background-color)");
    padding: 4px;
}

.removeBullet {
    mask-image: changeOpRemoveIconUrl;
    -webkit-mask-image: changeOpRemoveIconUrl;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-color: literal("var(--delete--color)");
    flex-grow: 0;
    flex-shrink: 0;
}

.source {
    color: literal("var(--secondary--color)");
    padding-right: 10px;
    min-width: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}

.lineElement {
    display: inline-block;
    width: 500px;
    vertical-align: top;
    white-space: normal;
    flex-grow: 1;
    flex-shrink: 1;
}

